<template>
    <div class="recordContainer">
        <div class="canlendar">
            <ul>
                <li v-for="canlendar in canlendars" :key="canlendar.id">
                    <div class="canlendarContent" 
                    :style=" canlendar.isShow===true ? {backgroundImage:'url('+backImg()+')',color:'#FFF'} : {backgroundImage:'none'} "
                    @click="ifShow(canlendar.id)"
                    >
                        <p class="day" :style=" canlendar.isShow===true ? {color:'#FFF'} : {color:'#333333'} ">{{ canlendar.day }}</p>
                        <p class="month" :style=" canlendar.isShow===true ? {color:'#FFF'} : {color:'#333333c3'} ">{{ canlendar.month }}月</p>
                    </div>
                </li>
            </ul>
        </div>
        <myInfo/>
    </div>
</template>

<script>
    import myInfo from '../components/myInfo.vue'
    export default {
        name:'myRecord',
        components:{myInfo},
        data(){
            return{
                canlendars:[
                    {id:'0',day:18,month:12,isShow:true},
                    {id:'1',day:19,month:12,isShow:false},
                    {id:'2',day:20,month:12,isShow:false},
                    {id:'3',day:21,month:12,isShow:false},
                    {id:'4',day:22,month:12,isShow:false}
                ]
            }
        },
        computed:{
            backImg(){
                return () =>{
                    return require(`../assets/img/2-icon@2x/2-1record.png`)
                }
            }
        },
        methods:{
            ifShow(id){
                for(let i=0;i<this.canlendars.length;i++){
                    if(parseInt(id)===i){
                        this.canlendars[i].isShow=true
                    }
                    else{
                        this.canlendars[i].isShow=false
                    }
                }
            }
        },
        mounted(){
            let nowDate=new Date();
            let nowDay=nowDate.getDate()
            let nowMonth=nowDate.getMonth()+1
            for(let i=0;i<this.canlendars.length;i++){
                this.canlendars[i].day=0
                this.canlendars[i].month=0
            }
            this.canlendars[0].day=nowDay
            this.canlendars[0].month=nowMonth
            for(let i=0;i<this.canlendars.length-1;i++){
                this.canlendars[i+1].day=this.canlendars[i].day+1
                this.canlendars[i+1].month=this.canlendars[0].month
                
            }
        }
    }
</script>

<style scoped>
    .recordContainer{
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    .canlendar{
        margin-top: 1.76rem;
        width: 100%;
        overflow-x: scroll;
        scrollbar-width: none; 
    }
    .canlendar ul{
        width: 7.8rem;
        display: flex;
    }
    .canlendar ul .canlendarContent{
        width: 1.24rem;
        height: 1.4rem;
        background-image: url(../assets/img/2-icon@2x/2-1record.png);
        background-position: center;
        background-size: contain;
        margin-left: .32rem;
        border-radius: .2rem;
        background-color: #FFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all 0.5s;
    }
    .day{
        margin-top: .3rem;
        font-family: 'PingFangSC-Mediuem';
        font-size: .35rem;
        transition: all 0.5s;
    }
    .month{
        font-family: 'PingFangSC-Regular';
        font-size: .2rem;
        transition: all 0.5s;
    }
</style>